<template>

    <div  class="all">
      <div>
        <h2>精品书籍</h2>
      </div>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item,index) in bookList" :key="index">
          <h3><img :src="$store.state.baseImgUrl+item.img" alt="" @click="bookDetail(item.id)"></h3>
        </el-carousel-item>
      </el-carousel>
    </div>


</template>

<script>

export default {
  name: "BookRotation",
  data(){
    return{
      bookList:[],

      bookQuery:{
        pageSize:3
      }
    }
  },
  methods:{
    bookDetail(bookId){
      this.$router.push({path:'/purchasePage',query:{curBookId:bookId}})
    },
  },
  mounted() {
    setTimeout(function (){

    },1000)
  },
  created() {
    this.getRequest('/p/pms/book/customList',this.bookQuery).then((resp)=>{
      this.bookList = resp.data.list
    })
  }
}
</script>

<style scoped>
*{padding:0;margin: 0;list-style: none;}
  .all{
    width: 390px;
    height: 272px;
    /*border: solid 1px blue;*/
    position: absolute;
    left: 19.5em;
    top: 27em;
    overflow: hidden;
    border:solid 1px white;
    margin: 1em;
  }
  .all>div{
    background-color: #F1F1F1;
  }
  .all div h2{
    border-left: 6px solid red;
    padding-left: 2px;
    margin-left: 6px;
    font-family: 宋体;
  }
  .all img{
    width: 434px;
    height: 290px;
  }
    /*display: none;*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>